<template>
  <Container>
    <el-container class="search-page">
    <el-header class="searchheader">
      <h1>你不搜搜怎么知道？</h1>
    </el-header>
    
    <el-main>
      <!-- 搜索框 -->
      <SearchInput
        @search="handleSearch"
        v-model:category="searchCategory"
        :categories="categories"
      />
      <!-- 搜索结果 -->
      <SearchResults :results="filteredResults" />
    </el-main>
    
  <el-pagination
        v-if="currentPage"
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        class="pagination"
      />

  </el-container>

    <Footmenu/>
  </Container>
</template>

<script>
import { ref ,computed} from "vue";
import Container from '../components/main/container.vue';
import Footmenu from '../components/main/footmenu.vue'; 
import SearchInput from '../components/search/searchinput.vue';
import SearchResults from '../components/search/searchresult.vue';
import { get } from "@/net";
export default {
name: 'Search',
components:{
  Container,Footmenu,SearchInput,SearchResults
},
setup() {
    // 定义响应式数据
    // 当前选择的分类
    const searchCategory = ref(""); 
    const currentPage=ref(0);
    const pageSize=ref(10);
    const total=ref(0);
    // 分类列表
    const categories = ref([
      { label: "用户", value: "user" },
      { label: "提问箱", value: "question" },
    ]);

    // 存储所有搜索结果
    const results = ref([]);

    // 搜索请求函数
    const fetchUserResults = async (query) => {
      try {
        const endpoint = "/account/find_account";
        get(
          endpoint,
          {id: query,pageNum:currentPage,pageSize:pageSize},
          (message) => {
            results.value = message.data.userdata.map((item) => {
              return {
                ...item, // 保留原有字段
                type: "用户搜索信息", // 手动添加 `type` 字段
              };
            });
            total.value = message.data.total; // 假设接口返回 `total` 字段
          },
          () => {
            console.error("请求失败");
          }
        );
      } catch (error) {
        console.error("获取数据出错:", error);
      }
    };

    // 获取提问箱搜索结果
    const fetchBoxResults = async (query) => {
      try{
        const endpoint = "/question_box/find_question_box";
        get(
          endpoint,
          { title:query, page: currentPage.value, size: pageSize.value },
          (message) => {
            results.value = message.data.boxdata.map((item) => {
              return {
                ...item, // 保留原有字段
                type: "提问箱搜索信息", // 手动添加 `type` 字段
              };
            });
           total.value=message.data.total;
          },
          () => {
            console.error("获取提问箱数据出错:", error);
          }
        );
      }
      catch (error) {
        console.error("获取数据出错:", error);
      }
    };


    // 搜索逻辑
    const handleSearch = async (query) => {
      if (!searchCategory.value) {
        results.value = [];
        return;
      }
      if(!currentPage.value) currentPage.value=1;
      try {
        if (searchCategory.value === "user") {
          fetchUserResults(query);
        } else if (searchCategory.value === "question") {
          fetchBoxResults(query);
        }
      } catch (error) {
        console.error("搜索失败:", error);
      }
    };

    // 过滤后的搜索结果
    const filteredResults = computed(() => results.value);

    // 分页逻辑
    const handlePageChange = async (page) => {
      currentPage.value = page;
      await handleSearch(""); // 根据当前分类重新请求数据
    };

    return {
      searchCategory,
      categories,
      results,
      handleSearch,
      filteredResults,
      handlePageChange,pageSize,currentPage,total
    };
  },
};
</script>

<style scoped>
.search-page {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  height: 92%;
}
.searchheader {
  background-color: #409eff;
  color: white;
  text-align: center;
  height: 10%;
}
.pagination {
  height: 5%;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
  padding: 1%;
}
.el-main{
  padding: 0%;
}
</style>